<template>
  <div style="width: 100%">
    <el-header class="el-header" style="max-height: 50px">
      <el-button icon="el-icon-s-unfold" v-on:click="changeCollaspse"
                 circle style="float: left; margin-top: 5px"></el-button>
      <div style="float:right;">
        <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" style="border: 0" :router="true">
          <el-menu-item>超级管理员</el-menu-item>
          <el-submenu index="1">
            <template slot="title">我的工作台</template>
            <el-menu-item index="/personal">基本资料</el-menu-item>
            <el-menu-item index="/smap">可视化管理</el-menu-item>
            <el-divider class="hr"></el-divider>
            <el-menu-item @click="logout()">退出</el-menu-item>
          </el-submenu>
          <el-menu-item index="/personal">
            <div class="block"><el-avatar :size="35" :src="circleUrl"></el-avatar></div>
          </el-menu-item>
        </el-menu>
      </div>
    </el-header>
    <el-divider class="hr" style="padding: 0;margin: 0"></el-divider>
<!--    <el-main style="padding: 0;margin: 0">-->
<!--      <v-tabNav></v-tabNav>-->
<!--    </el-main>-->

<!--    <el-divider class="hr" style="padding: 0;margin: 0"></el-divider>-->
  </div>
</template>

<script>
  import tabNav from "./tabNav"

    export default {
      name: "header",
      props:['isCollaspse'],
      data() {
        return {
          circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        };
      },
      components:{
        'v-tabNav': tabNav
      },
      methods: {
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        changeCollaspse : function () {
          this.$emit('Collaspse', !this.isCollaspse);
        },
        logout : function () {
          // 注销功能， 在下方做注销的相关操作
          window.sessionStorage.removeItem("user");
          this.$router.push("/login");
        }
      },
    }
</script>

<style scoped>
  .el-header{
    width: 100%;
    margin-bottom: 5px;
  }
  .hr{
    padding: 0;
    margin: 5px;
  }
</style>
